<script setup>
  import { ref } from "vue";
  import { useRouter } from "vue-router";

  const router = useRouter();

  let second = ref(3);


  setInterval(() => {
    if (second.value === 1) {
      router.replace("/index");
      return;
    }
    second.value--;
  }, 1000);

</script>

<template>
  <div class="error-basic">
    <div class="error-message">
      <div class="error-message-title">404</div>
      <div class="error-message-info">请您稍等，将在<span>{{ second }}</span>秒后跳转至首页 ~</div>
    </div>
  </div>
</template>

<style scoped>
  .error-basic {
    width: 100vw;
    height: 100vh;
    display: flex;
    color: rgb(58, 58, 58);
  }

  .error-message {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    top: 30vh;
  }
  .error-message-title {
    font-size: 48px;
    font-weight: bold;
    text-align: center;
  }
  .error-message-info {
    text-align: center;
    font-size: 18px;
  }
  span {
    color: red;
    padding: 0 5px;
  }
</style>